<template>
    <div class="rectzone">
            <div class="imgbox" :class="[{'imgnobox':boxmode==2}]">
                <transition name="rightfade">
                    <div class="itembox" v-for="(item,index) in imgList" :key="index" v-if="index==selectimg">
                        <img :src="item" >
                    </div>
                </transition>
            </div>
            <div class="shadow"></div>
    </div>
</template>

<script>
export default {
    name:'Imgbox',
    props:[
        "imgList",
        "selectimg",
        "boxmode" //1有白色边框 //无边框
    ]
}
</script>

<style lang="scss" scoped>
.rectzone{
    width: 100%;
    height: 100%;
    background:#ffffff;
    border:.01rem solid #71aa85;
    position: relative;
    z-index: 100;
    .imgbox{
        width:  95%;
        height: 92%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;
        &.imgnobox{
            width: 100%;
            height: 100%;
        }
        .itembox{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
        }
    }
    .shadow{
        width: 100%;
        height: .42rem;
        position: absolute;
        bottom: -0.42rem;
        left: 0;
        background: url(~@/assets/img/bigscreen/rectshadow.png) no-repeat;
        background-size: 100% 100%;
    }
}
</style>
